<template>
  <el-select
    v-model="value"
    value-key=""
    placeholder=""
    multiple
    collapse-tags
    clearable
  >
    <template>
      <el-option-group class="search-group" key="search-group">
        <el-option value="-1">
          <div class="multi-check--input" @click.stop>
            <el-input
              v-model="searchTxt"
              placeholder=""
              size="small"
            ></el-input>
          </div>
        </el-option>
      </el-option-group>
      <el-option-group class="select-group" key="select-group">
        <template>
          <el-option value="-2">
            <div class="multi-checkbox" @click.stop>
              <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                class="select-checkbox"
                @change="changeAllCheck($event)"
              >
                全选
              </el-checkbox>
            </div>
          </el-option>
          <template v-for="item in options">
            <el-option :key="item.id" :label="item.label" :value="item.id">
              <div class="multi-checkbox" @click.stop>
                <el-checkbox
                  :label="item.id"
                  v-model="item.checked"
                  class="select-checkbox"
                  @change="changeCheck(item)"
                >
                  {{ item.label }}
                </el-checkbox>
              </div>
            </el-option>
          </template>
        </template>
        <!-- <template v-else>
          <div class="dropdown__empty">无匹配数据</div>
        </template> -->
      </el-option-group>
    </template>
  </el-select>
</template>


<script>
export default {
  data() {
    return {
      value: [],
      searchTxt: "",
      isIndeterminate: true,
      checkAll: false,
      options: [
        {
          label: "选项1",
          id: 1,
          checked: false,
        },
        {
          label: "选项2",
          id: 2,
          checked: false,
        },
        {
          label: "选项3",
          id: 3,
          checked: false,
        },
        {
          label: "选项4",
          id: 4,
          checked: false,
        },
        {
          label: "选项5",
          id: 5,
          checked: false,
        },
      ],
    };
  },
  watch: {
    value(v) {
      if (v.length == this.options.length) {
        this.checkAll = true;
        this.isIndeterminate = false;
      } else {
        this.checkAll = false;
        this.isIndeterminate = true;
      }
    },
  },
  methods: {
    changeAllCheck(e) {
      if (!this.checkAll) {
        //   取消
        this.isIndeterminate = true;
        this.options.forEach((el) => (el.checked = false));
        this.value = [];
      } else {
        this.value = [];
        this.isIndeterminate = false;
        this.options.forEach((el) => (el.checked = true));
        this.options.forEach((el) => {
          this.value.push(el);
        });
      }
    },
    changeCheck(item) {
      let ids = [];
      this.value.forEach((el) => ids.push(el.id));
      console.log(item);
        this.$forceUpdate()

      if (ids.indexOf(item.id) > -1) {
        if (!item.checked) {
          let idx = ids.indexOf(item.id);
          this.value.splice(idx, 1);
        }
      } else {
        if (item.checked) {
          this.value.push(item);
        }
      }
    },
  },
};
</script>